<template>
  <div class="home">
    <!-- 内容 -->
    <div v-for="(list, index) of lists" :key="index">
      <p>排序号：{{num(i)}}</p>
      <div>{{list}}</div>
    </div>
    <!-- 分页吗 -->
    <ul>
      <li @click="upperNum" :class="page.pageNo<=1?'disabled':''">上一页</li>

      <li :class="page.pageNo == index?'active':''"
        v-for="(num, index) of pages"
        :key="index"
        @click="numClick(index)"
         >
        <a>{{num}}</a>
      </li>

      <li @click="nextNum" :class="page.pageNo>=page.pageTotal?'disabled':''">下一页</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0, // 序号
      lists: [], // 总数居
      page: {
        pageTotal: 1, // 总页页码
        rows: 1, //总条数
        pageNo: 1, // 当前页码
        pageSize: 10, // 每一页多少条数据
      }
    }
  },
  methods: {
    async getList(i) { // 获取数据的方法
      this.page.pageNo = i || this.page.pageNo // 点击跳转传的页码有的话就传，没有就传默认页码
      //const data = await this.axios.get('/page/' + this.page.pageNo + '/' + this.page.pageSize) es5的写法
      const data = await this.axios.get(`/page/${this.page.pageNo}/${this.page.pageSize}`) // es6的写法
      this.lists = res.data.data
      this.page.pageTotal = res.pageTotal // 获取总页数
      this.page.rows = res.data.rows // 获取总条数
    },
    upperNum() { // 上一页
      if (this.page.pageNo > 1) {
        this.page.pageNo --
        this.getList(this.page.pageNo)
      }
    },
    numClick(i) { // 当前页
      if (i == '...') return
      this.getList(i)
    },
    upperNum() { // 下一页
      if (this.page.pageNo < this.page.pageTotal) {
        this.page.pageNo ++
        this.getList(this.page.pageNo)
      }
    }
  },
  created() {
    this.getList()
  },
  computed: { // 计算序号
    num () {
      return function(i) { // 计算属性需要再return中传参  计算属性可以传参
        return (this.page.pageNo-1) * this.page.pageSize + i + 1
      }
    },
    pages() { // 页码计算
      const start = this.page.pageNo
      const end = this.page.pageTotal
      if (end<10) return end // 最大码数小于10
      if(start <= 5) {
        return [1,2,3,4,5,6,'...',end]
      } else if(start >= end-5) {
        return [1,'...',end-5,end-4,end-3,end-2,end-1,end]
      } else {
        return [1,'...',start-3,start-2,start-1,start,start+1,start+2,'...',end]
      }
    }
  }  
}
</script>

<style scope>

</style>

// 总页数<=10 不需要添加省略号
// 总页数>10 需要添加省略号
// 当前页码<5 [1,2,3,4,5,...,20]
// 当前页码>16 [1,...,15,16,17,18,19,20]
// 当前页码>5 [1,...,3,4,5,6,7,...,20]